<template>
	<scroll-view class="album_scroll_view" scroll-y @scrolltolower="handleTolower">
		<!-- 轮播开始 -->
		<view class="album-swiper">
			<!-- 
				1.autoplay:自动轮播
				2.indicator-dots:轮播图指示点
				3.circular:衔接轮播
				
				4.swiper默认高度150px
				5.image 默认宽度320px =>重置width:100% 默认高度240px
				6.计算图片的宽度和高度
				7.把图片的比例也写到swiper样式标签
			 -->
			<swiper autoplay indicator-dots circular>
				<swiper-item v-for="item of banner" :key="item.id">
					<image :src="item.thumb"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播结束 -->
		<!-- 列表开始 -->
		<view class="album_list">
			<navigator 
			class="album_item" 
			v-for="item of album" 
			:key="item.id"
			:url="`/pages/album/index?id=${item.id}`"
			
			>
				<view class="album_img">
					<image :src="item.cover" ></image>
				</view>
				<view class="album_info">
					<view class="album_name">{{item.name}}</view>
					<view class="album_desc">{{item.desc}}</view>
					<view class="album_btn">
						<view class="album_attention">关注</view>
					</view>
				</view>
			</navigator>
			
		</view>
		<!-- 列表结束 -->
	</scroll-view>
</template>

<script>
	export default{
		data() {
			return {
				params:{
					limit:30,
					order:'new',
					skip:0
				},
				album:[],
				banner:[],
				hasMore:true
			}
		},
		mounted(){
			// 动态修改页面(组件)标题
			uni.setNavigationBarTitle({
				title:'专辑'
			}),
			this.getList()
			
		},
		methods:{
			getList(){
				this.request({
					url:'http://157.122.54.189:9088/image/v1/wallpaper/album',
					data:this.params
				}).then(result=>{
					console.log('res',result);
					if(this.banner.length === 0){
						this.banner = result.res.banner
					}
					
					this.album = [...this.album,...result.res.album]
					if(result.res.album.length === 0){
						this.hasMore = false
						uni.showToast({
							title:'没有更多数据了',
							icon:'none'
						})
						return
					}
					
					
					
				})
			},
			handleTolower(){
				if(this.hasMore){
					this.params.skip+=this.params.limit
					this.getList()
				}else{
					uni.showToast({
						title:'没有更多数据了',
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.album_scroll_view{
		height: calc(100vh - 36px);
	}
	.album-swiper {
	  swiper {
	   /* 宽固定750rpx，高度按图片比例调整 640/284≈2.3 */
	   height:calc(750rpx/2.3);
	    image {
	      height: 100%;
	    }
	  }
	}
	
	.album_list{
		padding: 10rpx;
		.album_item{
			display: flex;
			padding: 10rpx 0;
			border-bottom: 1rpx solid #ccc;
			.album_img{
				flex: 1;
				padding: 10rpx;
				image{
					width: 200rpx;
					height: 200rpx;
				}
			}
			.album_info{
				flex: 2;
				padding: 0 10rpx;
				overflow: hidden;
				.album_name{
					font-size: 30rpx;
					color: #000;
					padding: 10rpx 0;
				}
				.album_desc{
					padding: 10rpx 0;
					font-size: 24rpx;
					
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					
					
				}
				.album_btn{
					padding: 10rpx;
					display: flex;
					justify-content:flex-end;
					.album_attention{
						color: $color;
						border: 1rpx solid $color;
						padding: 10rpx;
					}
				}
			}
		}
	}

</style>
